import React  from 'react';
import { observer, inject } from "mobx-react";
import { withRouter } from 'react-router-dom';
import { Slider, WingBlank, WhiteSpace} from 'weaver-mobile';

//@inject("actionSheetStore")
@inject("mainStore")
@withRouter
@observer
/*
 * @info: 进度条组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 18-03-2019 05:33:18
 */
export default class ComProgress extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      sliderValue: this.props.mainStore.actionSheetStore.sliderValue,
    }
  }
  render() {
    const marks = {
        0: '0%',
        20: '20%',
        40: '40%',
        60: '60%',
        80: '80%',
        100: {
          style: {
            color: 'rgb(135, 208, 104)',
          },
          label: <strong>100%</strong>,
        },
      };
    return(
      <div className="g-comProgress">
        <div style={{ marginBottom: 40 }}>
          <WhiteSpace size="lg" />
          <WingBlank size="lg">
          <Slider
            style={{ marginTop: 40 ,touchAction: "none"}}
            defaultValue={0}
            min={0}
            max={100}
            marks={marks}
            value={this.state.sliderValue}
            onChange={(v)=>{this.changeHandle(v)}}
          />
          </WingBlank>
          <WhiteSpace size="lg" />
        </div>
      </div>
    );
  }
  changeHandle(v){
      const {changeHandle,mainStore:{actionSheetStore:{setSliderValue}}} = this.props;
      this.setState({
        sliderValue:v
      })
      changeHandle && changeHandle(v);
      setSliderValue(v);
  }
}
